<template>
  <div class="knowledge-page">
    <div class="knowledge-title" :key="currentType">
        {{currentType=='all'?$t('message.silder.allLibraries'):$t('message.silder.myLibraries')}}
    </div>
    <div class="knowledge-body" v-loading="knowLoading">
        <el-scrollbar v-if="knowList.length!=0">
            <div class="knowledge-list-box">
                <div :class="['knowledge-item',item.isTopping && 'knowledge-top']" v-for="(item,index) in knowList" :key="index"
                    @click="goToKnowPage(item)">                   
                    <div :class="['lable',item.shareRole === 'user'&&'user',item.shareRole === 'register'&&'register']">{{item.shareRole === 'register'?$t('message.typeMenu.enterprise'):item.shareRole === 'user'?$t('message.typeMenu.private'):$t('message.typeMenu.wholeNetwork')}}</div>
                    <div class="cover-box">
                        <img :src="item.color?item.color:'/jvs-public/img/风景/a4.png'">
                        <div class="know-set">
                            <div class="know-set-item" @click.stop="chagneTop(item,index)">
                                <svg class="set-icon">
                                    <use v-bind:xlink:href="`#${item.isTopping?'keowledge-quxiaozhiding1':'keowledge-zhiding'}`"></use>
                                </svg>
                                <div>{{item.isTopping?$t('message.buttons.unTop'):$t('message.buttons.top')}}</div>
                            </div>
                            <div class="know-set-item" @click.stop="delKnow(item,index)" :class="[!$permissionRole('library_delete',item.dcIdentifying) && 'disabled-click']">
                                <svg class="set-icon">
                                    <use xlink:href="#keowledge-shanchu"></use>
                                </svg>
                                <div>{{$t('message.buttons.delete')}}</div>
                            </div>
                            <div class="know-set-item" @click.stop="downLoadKnow(item)" :class="[(!$permissionRole('library_down',item.dcIdentifying) || true) && 'disabled-click']">
                                <svg class="set-icon">
                                    <use xlink:href="#keowledge-xiazai"></use>
                                </svg>
                                <div>{{$t('message.buttons.download')}}</div>
                            </div>
                            <div class="know-set-item" @click.stop="openSet(item,index)" :class="[!$permissionRole('library_update',item.dcIdentifying) && 'disabled-click']">
                                <svg class="set-icon">
                                    <use xlink:href="#keowledge-shezhi"></use>
                                </svg>
                                <div>{{$t('message.buttons.setting')}}</div>
                            </div>
                        </div>
                    </div>
                    <div v-tooltip-auto-show>
                        <el-tooltip :content="item.name" effect="light">
                            <div class="know-name">{{item.name}}</div>
                        </el-tooltip>
                    </div>
                    <!-- <div v-tooltip-auto-show>
                        <el-tooltip :content="item.description"> -->
                           <div class="know-desc" :title="item.description">
                                {{item.description}}
                           </div>
                        <!-- </el-tooltip>
                    </div> -->
                </div>
            </div>
        </el-scrollbar>
        <jvs-empty v-if="knowList.length==0" :text="$t('message.empty.nullLibary')"></jvs-empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  nextTick,
  onMounted,
  getCurrentInstance,
  onBeforeUnmount
} from 'vue' 

import { useRouter,useRoute } from "vue-router"
import { getDcLibraryList,knowledgesOwner,dclibRecycle,topAdd,topCancal,downLoadFileD } from '@/api/knowledge'
import useUserInfoStore from '@/store/userInfo';
import { $permissionRole } from '@/utils/role'
import { downLoad } from '@/utils/util'
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
const router = useRouter();
const route = useRoute();
const emit = defineEmits([""])
const userStore = useUserInfoStore()
const { proxy } = getCurrentInstance()
const props = defineProps({
})
const currentType = ref('')
const knowList = ref([])
const knowLoading = ref(false)
onMounted(()=>{
    currentType.value = route.params.type
    proxy.$eventBus.$on('refreshPage',()=>{
        init(false)
    })
    init(true)
})
onBeforeUnmount(()=>{
    proxy.$eventBus.$off('refreshPage',()=>{
        init(false)
    })
})
watch(()=>route.params,(newParams,oldParams)=>{
    currentType.value = newParams.type
    init(true)
})
function init(refresh){
    knowLoading.value = true
    let fun = getDcLibraryList
    if(currentType.value=='my'){
        fun  = knowledgesOwner
    }
    fun({
        size:1000,
        current:1,
    }).then(res=>{
        if(res.data.code==0){
            knowList.value = res.data.data.records
            if(refresh){
                proxy.$eventBus.$emit('knowledgeList',knowList.value,currentType.value)
            }
        }
    }).finally(()=>{
        knowLoading.value = false
    })
}
// 置顶
function chagneTop(item,index){
    let fun = topAdd
    if(item.isTopping){
        fun = topCancal
    }
    fun({
        dcId:item.id,
        userId:userStore.userInfo.id
    }).then(res=>{
        if(res.data.code == 0){
            item.isTopping = !item.isTopping
            knowList.value.splice(index,1)  
            knowList.value.splice(0,0,item)
            nextTick(()=>{
                if(!item.isTopping){
                    let topArr = knowList.value.filter(item=> { return item.isTopping })
                    let notopArr = knowList.value.filter(item=> { return !item.isTopping })
                    let notopSort = notopArr.sort((a,b)=>{
                        let aT = new Date(a.createTime).getTime()
                        let bT = new Date(b.createTime).getTime()
                        return bT-aT
                    })
                    knowList.value = [...topArr,...notopSort]
                }
                proxy.$eventBus.$emit('knowledgeList',knowList.value,currentType.value)
            })
        }
    })
}
// 删除知识库
function delKnow(item,index){
    if(!$permissionRole('library_delete',item.dcIdentifying)) return
    proxy.$confirm($t('message.confirm.delLibary'), $t('message.prompt'), {
        confirmButtonText: $t('message.buttons.submit'),
        cancelButtonText: $t('message.buttons.cancal'),
        type: 'warning'
      }).then(() => {
        dclibRecycle(item.id).then(res => {
          if(res.data.code == 0) {
            proxy.$notify({
              title: $t('message.message.delSuccess'),
              type: 'success',
              position: 'bottom-right'
            });
            knowList.value.splice(index,1)
            proxy.$eventBus.$emit('knowledgeList',knowList.value,currentType.value)
          }
        })
      }).catch(e => {})
}
//  下载知识库
function downLoadKnow(item){
    return
    if(!$permissionRole('library_down',item.dcIdentifying)) return
    downLoadFileD({id:item.id,timestamp:new Date().getTime()},'blob',(e)=>{
        // downLoadFileInfo.percentage = parseInt(e.progress * 100)>=99?99:parseInt(e.progress * 100)
        // this.sendDownData(downLoadFileInfo)
    }).then(res=>{
        downLoad(res,true,()=>{

        },()=>{

        })
    }).catch(err=>{
        proxy.$notify({
            title: $t('message.prompt'),
            message: $t('message.message.fileDownError'),
            type: 'warning',
            position: 'bottom-right'
        });
    }).finally(res=>{
    })
}
// 打开文库设置
function openSet(item,index){
    if(!$permissionRole('library_update',item.dcIdentifying)) return
    proxy.$openKnowSet({
        knowInfo:item,
        changeVal:(val)=>{
            knowList.value[index] = val
        },
        transtionBack:()=>{
            init(true)
        }
    })
}
// 
function goToKnowPage(item){
    router.push({
        path:`/knowledge/${currentType.value}/${item.id}`
    })
}
</script>
<style lang="scss" scoped>
.knowledge-page{
    position: relative;
    width: 100%;
    height: 100%;
    .knowledge-title{
        margin: 0px 24px;
        font-size: 20px;
        @include SourceHanSansCN-Bold;
        color: #363b4c;
    }
    .knowledge-body{
        height: calc(100% - 45px);
        padding: 16px 0 0 0;
        .knowledge-list-box{
            display: flex;
            padding: 0px 24px 16px;
            margin-bottom: 16px;
            grid-column-gap: 26px;
            grid-row-gap: 16px;
            flex-wrap: wrap;
            .knowledge-item{
                width: 170px;
                height: 224px;
                background: #F5F6F7;
                border-radius: 6px;
                cursor: pointer;
                padding: 12px;
                box-sizing: border-box;
                position: relative;
                .lable{
                    position: absolute;
                    top: 12px;
                    left: 12px;
                    font-size: 12px;
                    @include SourceHanSansCN-Regular;
                    color: #1e6fff;
                    background-color: #E8F0FF;
                    border-radius: 5px 0px 5px 0px;
                    width: 40px;
                    text-align: center;
                    height: 18px;
                    line-height: 18px;
                    z-index: 2;
                }
                .user{
                    background: #FFE7ED;
                    color: #FF194C;
                }
                .register{
                    background: #E9F7EC;
                    color: #36B452;
                }
                .cover-box{
                    width: 146px;
                    height: 146px;
                    overflow: hidden;
                    margin-bottom: 12px;
                    position: relative;
                    img{
                        width: 146px;
                        height: 146px;
                        border-radius: 5px;
                    }
                    .know-set{
                        visibility: hidden;
                        position: absolute;
                        top: 0px;
                        left: 0px;
                        display: grid;
                        grid-template-columns: 56px 56px;
                        justify-content: center;
                        // padding: 25px 20px;
                        padding: 12px 13px;
                        grid-column-gap: 8px;
                        grid-row-gap: 8px;
                        flex-wrap: wrap;
                        .know-set-item{
                            user-select: none;
                            width: 56px;
                            height: 56px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            font-size: 12px;
                            color: #FFFFFF;
                            @include SourceHanSansCN-Regular;
                            &:hover{
                                background: rgba(255,255,255,0.1);
                                border-radius: 5px 5px 5px 5px;
                            }
                            .set-icon{
                                height: 20px;
                                width: 20px;
                                cursor: pointer;
                            }
                        }
                        .disabled-click{
                            .set-icon{
                                cursor: not-allowed !important;
                            }
                        }
                    }
                }
                .know-name{
                    font-size: 14px;
                    @include SourceHanSansCN-Bold;
                    color: #363b4c;
                    height: 18px;
                    line-height: 18px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .know-desc{
                    @include SourceHanSansCN-Regular;
                    margin-top: 8px;
                    color: #6F7588;
                    font-size: 12px;
                    height: 16px;
                    line-height: 16px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 146px;
                    position: relative;
                }
                &:hover{
                    background-color: #1E6FFF ;
                    .lable{
                        visibility: hidden;
                    }
                    .cover-box{
                        img{
                            display: none;
                        }
                        .know-set{
                            visibility: visible;
                        }
                    }
                    .know-name{
                        color: #FFFFFF !important;
                    }
                    .know-desc{
                        color: #FFFFFF !important;
                    }
                }
            }
            .knowledge-top{
                background: #E4EDFF;
            }
        }
    }
}

</style>